<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="">
    用户名：<input type="text" id="txt" name="username"><span id="msg"></span><br>
    密  码：<input type="text" name="userpwd"><br>
    <input type="submit" value="注册">
  </form>
  <script src="xhr.js"></script>
  <script>
    //1.用户名文本框上注册失焦事件
    document.getElementById('txt').onblur = function(){
      //2.失焦事件
      // 1)获取已填写用户名
      var username = this.value;
      // 2)发送Ajax请求并将用户名一起发送给后端
      //  ① 实例化 xhr 对象
      var xhr =getXhr();
      //  ② 调用 open 方法准备 Ajax 请求
      xhr.open('post','/api/checkUser');
      //  ③ 将发送到服务器的数据拼接成字符串
      var args = 'username=' + username;
      //  ④ 重设请求头
      xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
      //  ⑤ 调用 send 发送请求，将 args 作为参数传入
      xhr.send(args);
      // 3)调用onreadystatechange事件监听readyState的状态：当readyState == 4时，使用xhr.responseText来接受后端返回的数据
      xhr.onreadystatechange = function(){
        var span  = document.getElementById('msg');
        if(xhr.readyState == 4){
          if(xhr.responseText == '用户名可用'){
            span.style.color = 'green';
          }else{
            span.style.color = 'red';
          };
          span.innerHTML = xhr.responseText;
        };
      };
    };
  </script>
</body>
</html>